<template>
	<view class='issue'>
		 <textarea @blur="blur" :value="option" placeholder="填写驳回意见..."/>
		 <view class="issue-btn-box">
		 	<button class="submit-btn" type="primary" @click="doSubmit">确认驳回</button>
		 </view>
	</view>
</template>
<script>
	export default {
		data(){
			return {
				user:{},
				option:""
			}
		},
		onLoad(data) {
			this.user._id=data.id
		},
		methods: {
			blur(e){
				this.option=e.detail.value
			},
			/**
			 * @name 提交
			 */
			doSubmit(){
				//驳回
				this.$api("user-center", "updUserById", {_id: this.user._id,authentication:{option:this.option},authenticationState:3}).then(res=>{
					uni.showModal({
						title:"成功",
						content:'已成功驳回！',
						success() {
							uni.navigateBack()
						}
					})
				})
			}
		}
	}
</script>
<style lang='scss'>
	$backgroundC:#f9f9f9;
	$borderColor:#f5f5f5;
	$white:#ffffff;
	$fontSize:28upx;
	.issue {
		background-color: $backgroundC;
		
		&-head{
			background-color: $white;
			height: 100upx;
			border-top: 1upx solid $borderColor;
			border-bottom: 1upx solid $borderColor;
			padding: 0 25upx;
			
			&-pic{
				width: 70upx;
				height: 70upx;
				border-radius: 50%;
				vertical-align: middle;
				margin-right: 17upx;
			}
			&-title{
				line-height: 100upx;
				font-size: 30upx;
				vertical-align: middle;
				margin-right: 35upx;
			}
			
			&-star-box{
				display: inline-block;
				
				image{
					width: 32upx;
					height: 32upx;
					vertical-align: middle;
					margin-right: 14upx;
				}
				image.active{
					animation: star_move ease-in 1 1s,star_rotate ease 1.5s infinite 1s;
				}
			}
		}
		textarea{
			width: 100%;
			height: 420upx;
			background-color: $white;
			font-size: $fontSize;
			color: #898989;
			padding: 24upx;
			box-sizing: border-box;
			line-height: 40upx
		}
		&-btn-box{
			padding: 54upx 30upx;
			background-color: #FFFFFF;
			button{
				width: 100%;
				height: 80upx;
				border-radius: 80upx;
				font-size: $fontSize;
				background-color: #31b977;
				line-height: 80upx
			}
		}
	}
	
	@keyframes star_move{
		from{
			width: 50upx;
			height: 50upx;
			transform: rotate(180deg)
		}
		to{
			width: 32upx;
			height: 32upx;
			transform: rotate(0)
		}
	}
	@keyframes star_rotate{
		0%{
			transform: rotateY(360deg)
		}
		100%{
			transform: rotateY(180deg)
		}
	}
</style>
